<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-input v-model="deptName" placeholder="请输入组织名称" clearable
                  size="small" prefix-icon="el-icon-search" @keyup.enter.native="handleSelectOrgCode"
        />
        <el-tree style="margin-top: 20px"
                 :data="deptOptions"
                 :filter-node-method="filterNode"
                 :expand-on-click-node="false"
                 ref="tree"
                 default-expand-all
                 @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
          <el-row>
            <el-form-item label="手机号" prop="account">
              <el-input
                v-model="queryParams.account"
                placeholder="请输入手机号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
              >搜索
              </el-button>
              <el-button
                type="warning"
                icon="el-icon-download"
                @click="handleExport"
                v-hasPermi="['statistic:userDeviceCount:export']"
                size="small"
              >导出
              </el-button>
            </el-form-item>
          </el-row>
        </el-form>

        <div>
          <template v-if="selectUser">
            <span>
            用户名: {{ selectUser.account }}
            </span>
            <span style="margin-left: 20px">
            昵称: {{ selectUser.nickName }}
            </span>
            <span style="margin-left: 20px">
            总数: {{ deviceTotalCount }}
            </span>
          </template>
        </div>

        <div>
          <template v-if="userDeviceChartData.count.length>0">
            <bar-chart :chart-data="userDeviceChartData" :height="height"/>
          </template>
          <template v-else>
            <div style="margin-top: 20px">
              <center>
                暂无数据
              </center>
            </div>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { deptTreeSelect } from '@/api/system/dept'
import { exportUserDeviceChart, getUserDeviceChart } from '@/api/system/statistic'
import BarChart from '@/views/dashboard/BarChart'
import { getAppUserByAccountAndOrgCode } from '@/api/system/user'

export default {
  name: 'index',
  components: {
    BarChart
  },
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      deptName: undefined,
      // 查询参数
      queryParams: {
        account: undefined,
        orgCode: undefined
      },

      // 报表的高度
      height: '500px',
      // 选择的日期数组, 第一个元素为起始时间, 第二个为结束时间
      // 报表数据
      userDeviceChartData: {
        yAxisData: [], count: [], position: 'right', color: '#2c5d3c'
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        yAxisIndex: [0]
      },
        {
          type: 'slider',
          start: 0,
          yAxisIndex: [0]
        }],

      //所选的用户
      selectUser: null,
      // 设备总数
      deviceTotalCount: 0
    }
  },
  created() {
    this.getTreeselect()
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
      })
    },

    handleQuery() {
      //若没有选择组织, 则默认使用顶层组织
      if (!this.queryParams.orgCode) {
        if (this.deptOptions[0]) {
          this.queryParams.orgCode = this.deptOptions[0].orgCode
        }
      }

      getAppUserByAccountAndOrgCode(this.queryParams).then(response => {
        if (response.code === 200) {
          if (response.data) {
            this.selectUser = response.data
          } else {
            this.selectUser = null
          }
        }
      })

      // 查询用户的设备数量
      getUserDeviceChart(this.queryParams).then(response => {
        if (response.code === 200) {
          let chartData = response.data
          let yAxisData = []
          let count = []
          if (chartData.length > 0) {
            for (let i = 0, len = chartData.length; i < len; i++) {
              yAxisData.push(chartData[i].axisData)
              count.push(chartData[i].count)
            }
          }

          this.userDeviceChartData.yAxisData = yAxisData
          this.userDeviceChartData.count = count
          this.dataZoom[0].start = count.length
          this.dataZoom[1].start = count.length
          this.userDeviceChartData.dataZoom = this.dataZoom

          // 计算总数
          this.deviceTotalCount = 0
          for (let i = 0, len = count.length; i < len; i++) {
            this.deviceTotalCount += count[i]
          }
        }
      })
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.deptName = data.label
      this.queryParams.orgCode = data.orgCode
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    handleSelectOrgCode() {
      this.$refs.tree.filter(this.deptName)
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return exportUserDeviceChart(this.queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    }
  }
}
</script>

<style scoped>

</style>
